import React, { useState, useContext } from "react";
import Chat, {
  Bubble,
  useMessages,
  Stepper,
  Step,
  FileCard,
} from "@chatui/core";
import { Drawer } from "antd";
import { DrawerStatus } from "./WhiteBoardControl";

import "@chatui/core/es/styles/index.less";
import "@chatui/core/dist/index.css";

export function ChatBotDrawer() {
  const { messages, appendMsg, setTyping } = useMessages([]);
  const [open, setOpen] = useContext(DrawerStatus);
  function handleSend(type, val) {
    if (type === "text" && val.trim()) {
      appendMsg({
        type: "text",
        content: { text: val },
        position: "right",
      });

      setTyping(true);

      setTimeout(() => {
        appendMsg({
          type: "text",
          content: {
            text: "你好，我是课堂机器人，我现在还没有接入实际功能，只是展示目的。",
          },
        });
        setTyping(true);
      }, 1000);
      setTimeout(() => {
        appendMsg({
          type: "text",
          content: {
            text: "我们可以通过调用百度文心一言的视频分析接口实现对课堂的分析，当然，他们的接口是收费滴。",
          },
        });
        setTyping(true);
      }, 1500);
      setTimeout(() => {
        appendMsg({
          type: "text",
          content: {
            text: "接下来我展示一下课堂线索图类似什么形式：",
          },
        });
        setTyping(true);
      }, 2000);
      setTimeout(() => {
        appendMsg({
          type: "step",
        });
      }, 2500);
    }
  }

  function renderMessageContent(msg) {
    const { content, type } = msg;
    switch (type) {
      case "text":
        return <Bubble content={content.text} />;
      case "step":
        return (
          <Bubble>
            <Stepper current={2}>
              <Step
                title="数列和函数的极限概念,以及数列的定义和通项公式"
                desc="00:00"
              />
              <Step
                title="数列极限的定义和证明方法,以及使用external语言时需要注意的细节"
                desc="12:34"
              />
              <Step
                title="推导过程的详细讲解,包括取绝对值、加减等运算"
                desc="32:18"
              />
            </Stepper>
          </Bubble>
        );
    }
  }

  return (
    <>
      <Drawer
        onClose={() => {
          setOpen(false);
        }}
        open={open}
        placement="left"
      >
        <Chat
          navbar={{ title: "课堂机器人" }}
          messages={messages}
          renderMessageContent={renderMessageContent}
          onSend={handleSend}
        />
      </Drawer>
    </>
  );
}
